<!--启动应急 左侧-->
<template>
    <div>
        <ul class="tabClass">
            <li
                v-for="(item, index) in list.data"
                :key="index"
                :class="{ active: index === list.currIndex }"
                @click="currentClick({ name: item.name, index })"
            >
                {{ item.name }}
            </li>
        </ul>
        <component :is="views"></component>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw } from 'vue';
import type { Component } from 'vue';
import { templateCommonFirst } from '@/components/custom/emergency/SiderTabLeft';

const views = markRaw<Component>(templateCommonFirst);
const list = reactive({
    currIndex: 0,
    data: [
        {
            name: '决策依据'
        },
        {
            name: '通讯指挥'
        },
        {
            name: '模型推演'
        }
    ]
});

const currentClick = ({ name, index }: { name: string; index: number }) => {
    list.currIndex = index;
};
</script>

<style scoped lang="scss">
.tabClass {
    display: flex;
    align-items: center;
    margin-top: 10px;
    .active {
        background: #1b93fb;
    }
    li {
        background: #03213a;
        color: #fff;
        font-size: 12px;
        width: 30%;
        text-align: center;
        padding: 8px 10px;
        cursor: pointer;
        &:nth-of-type(2n) {
            margin: 0 10px;
        }
    }
}
</style>
